<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css">
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.4.6&key=d09ab504ad2e0432b952109318e79dd2&plugin=AMap.MarkerClusterer"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jqResize.js"></script>
    <script type="text/javascript" src="js/laydate/laydate.js"></script>
    <style>
        html, body {
            background-color: #F0F0F0;
            font-family: "微软雅黑", Arial, Helvetica, sans-serif;
        }

        .con {
            margin-bottom: 30px;
        }

        .title {
            padding: 15px;
            background-color: #ffffff;
            border-radius: 5px;
            font-size: 1.125rem;
        }

        .chart_pie,
        .chart_bar,
        .chart_map {
            margin-top: 15px;
            background-color: #ffffff;
            border-radius: 5px;
            padding: 15px;
            position: relative;
        }

        .chart_pie {
            height: 290px;
        }

        .chart_bar,
        .chart_map {
            height: 375px;
        }

        .dateLayer {
            border: 0;
            outline: none;
            padding: 0 15px;
            width: 68px;
            font-size: 15px;
            cursor: pointer;
            position: relative;
            display: inline-block;
        }

        .dateLayer:after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            right: 0;
            top: 35%;
            /*top: 8px;*/
            border: 5px solid;
            border-color: #000 transparent transparent transparent;
        }

        .map_back {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            text-align: center;
            background-color: #ffffff;
            color: #000000;
            font-weight: bold;
            position: absolute;
            right: 2rem;
            bottom: 2rem;
            font-size: .9em;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            box-shadow: 0 0 10px 1px #000;
            cursor: pointer;
            opacity: .7;
            z-index: 99;
            display: none;
        }

        .map_back span {
            display: block;
            margin-top: .5em;
            line-height: 1.2em;
        }

        /*去掉地图上高德的logo和版本号，虽然很不道德*/
        .amap-logo,
        .amap-copyright {
            opacity: 0;
            display: none;
            pointer-events: none;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-6">
            <div class="title">设备地域分布</div>
            <div id="Chart_map" class="con chart_map">
                <div class="map_back"><span>返回<br>总览</span></div>
            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6">
            <div class="title">
                年度告警分析
                <div id="year" class="dateLayer" title="选择年份"></div>
            </div>
            <div id="Chart_bar" class="con chart_bar"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="title">设备使用情况</div>
        </div>
    </div>
    <div class="row con">
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div id="Chart_1" class="chart_pie"></div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div id="Chart_2" class="chart_pie"></div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div id="Chart_3" class="chart_pie"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="title">累计告警统计</div>
        </div>
    </div>
    <div class="row con">
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div id="Chart_21" class="chart_pie"></div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div id="Chart_22" class="chart_pie"></div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div id="Chart_23" class="chart_pie"></div>
        </div>
    </div>
</div>
<script type="text/javascript">

    $(function () {

        //年份切换
        laydate.render({
            elem: '#year',
            lang: 'cn', //cn（中文版）、en（国际版，即英文版）
            type: 'year',
            theme: 'default', //default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）
            showBottom: true, //是否显示底部按钮
            btns: ['now', 'confirm'], //clear、now、confirm 右下角显示的按钮，按照数组顺序排列
            value: new Date().getFullYear(),
            // change: function (value, date, endDate) { //切换选择的回调：值:2017-08-18，日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}，结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上
            //     console.log(value);
            // },
            done: function (value, date, endDate) { //选择完成的回调：值:2017-08-18，日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}，结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上
                // todo something 重绘年度告警分析柱状图
                console.log('年份：' + value);

                //取随机数字，模拟重绘柱状图表，实际需要根据年份通过ajax去获取数据
                var dataRandom = [
                    {value: Math.ceil(Math.random() * 100), name: '1月'},
                    {value: Math.ceil(Math.random() * 100), name: '2月'},
                    {value: Math.ceil(Math.random() * 100), name: '3月'},
                    {value: Math.ceil(Math.random() * 100), name: '4月'},
                    {value: Math.ceil(Math.random() * 100), name: '5月'},
                    {value: Math.ceil(Math.random() * 100), name: '6月'},
                    {value: Math.ceil(Math.random() * 100), name: '7月'},
                    {value: Math.ceil(Math.random() * 100), name: '8月'},
                    {value: Math.ceil(Math.random() * 100), name: '9月'},
                    {value: Math.ceil(Math.random() * 100), name: '10月'},
                    {value: Math.ceil(Math.random() * 100), name: '11月'},
                    {value: Math.ceil(Math.random() * 100), name: '12月'}
                ];
                drawChart_bar_year(dataRandom);

            }
        });

        //模拟数据
        var data1 = [
            {value: 555, name: '厂家A'},
            {value: 469, name: '厂家B'},
            {value: 234, name: '厂家C'},
            {value: 135, name: '厂家D'}
        ];
        drawChart_pie(document.getElementById("Chart_1"), '设备使用情况', '按厂家分类', data1);

        //模拟数据
        var data2 = [
            {value: 335, name: '苏州'},
            {value: 410, name: '南京'},
            {value: 234, name: '成都'},
            {value: 156, name: '杭州'},
            {value: 249, name: '武汉'},
            {value: 8, name: '芜湖'},
            {value: 1, name: '其它'}
        ];
        drawChart_pie(document.getElementById("Chart_2"), '设备使用情况', '按地域分类', data2);

        //模拟数据
        var data3 = [
            {value: 531, name: 'A项目'},
            {value: 0, name: 'B项目'},
            {value: 234, name: 'C项目'},
            {value: 235, name: 'D项目'},
            {value: 258, name: 'E项目'},
            {value: 135, name: 'F项目'}
        ];
        drawChart_pie(document.getElementById("Chart_3"), '设备使用情况', '按项目分类', data3);

        //模拟数据
        var data21 = [
            {value: 155, name: '厂家A'},
            {value: 309, name: '厂家B'},
            {value: 115, name: '厂家C'},
            {value: 225, name: '厂家D'}
        ];
        drawChart_pie(document.getElementById("Chart_21"), '累计告警统计', '按厂家分类', data21);

        //模拟数据
        var data22 = [
            {value: 135, name: '苏州'},
            {value: 262, name: '南京'},
            {value: 134, name: '成都'},
            {value: 163, name: '杭州'},
            {value: 102, name: '武汉'},
            {value: 8, name: '芜湖'},
            {value: 0, name: '其它'}
        ];
        drawChart_pie(document.getElementById("Chart_22"), '累计告警统计', '按地域分类', data22);

        //模拟数据
        var data23 = [
            {value: 170, name: 'A项目'},
            {value: 131, name: 'B项目'},
            {value: 200, name: 'C项目'},
            {value: 130, name: 'D项目'},
            {value: 58, name: 'E项目'},
            {value: 115, name: 'F项目'}
        ];
        drawChart_pie(document.getElementById("Chart_23"), '累计告警统计', '按项目分类', data23);

        //模拟数据
        var dataBar = [
            {value: 5, name: '1月'},
            {value: 131, name: '2月'},
            {value: 22, name: '3月'},
            {value: 130, name: '4月'},
            {value: 58, name: '5月'},
            {value: 25, name: '6月'},
            {value: 10, name: '7月'},
            {value: 67, name: '8月'},
            {value: 133, name: '9月'},
            {value: 22, name: '10月'},
            {value: 17, name: '11月'},
            {value: 0, name: '12月'}
        ];
        drawChart_bar_year(dataBar);

        //模拟数据 id-设备串号，org-所属机构，longlat-经纬度
        var dataMap_cu = [
            {
                "id": "237612878788",
                "org": "中国电信",
                "longlat": [
                    121.15,
                    31.89
                ]
            },
            {
                "id": "457612878788",
                "org": "中国电信",
                "longlat": [
                    109.781327,
                    39.608266
                ]
            },
            {
                "id": "127612878788",
                "org": "中国电信",
                "longlat": [
                    120.38,
                    37.35
                ]
            },
            {
                "id": "677612878788",
                "org": "中国电信",
                "longlat": [
                    122.207216,
                    29.985295
                ]
            },
            {
                "id": "237612878788",
                "org": "中国电信",
                "longlat": [
                    123.97,
                    47.33
                ]
            },
            {
                "id": "117612878788",
                "org": "中国电信",
                "longlat": [
                    120.13,
                    33.38
                ]
            },
            {
                "id": "577612878788",
                "org": "中国电信",
                "longlat": [
                    118.87,
                    42.28
                ]
            },
            {
                "id": "447612878788",
                "org": "中国电信",
                "longlat": [
                    120.33,
                    36.07
                ]
            },
            {
                "id": "227612878788",
                "org": "中国电信",
                "longlat": [
                    121.52,
                    36.89
                ]
            },
            {
                "id": "117612878788",
                "org": "中国电信",
                "longlat": [
                    102.188043,
                    38.520089
                ]
            },
            {
                "id": "007612878788",
                "org": "中国电信",
                "longlat": [
                    118.58,
                    24.93
                ]
            },
            {
                "id": "557612878788",
                "org": "中国电信",
                "longlat": [
                    121.05,
                    32.08
                ]
            },
            {
                "id": "777612878783",
                "org": "中国电信",
                "longlat": [
                    112.02,
                    22.93
                ]
            },
            {
                "id": "557612878788",
                "org": "中国电信",
                "longlat": [
                    121.48,
                    31.22
                ]
            },
            {
                "id": "587612878788",
                "org": "中国电信",
                "longlat": [
                    101.718637,
                    26.582347
                ]
            },
            {
                "id": "057612878788",
                "org": "中国电信",
                "longlat": [
                    117.93,
                    40.97
                ]
            },
            {
                "id": "707612878788",
                "org": "中国电信",
                "longlat": [
                    115.375279,
                    22.786211
                ]
            },
            {
                "id": "137612878788",
                "org": "中国电信",
                "longlat": [
                    124.37,
                    40.13
                ]
            },
            {
                "id": "257612878788",
                "org": "中国电信",
                "longlat": [
                    121.979603,
                    39.627114
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    109.47,
                    36.6
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    108.72,
                    34.36
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    115.89,
                    28.68
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    109.4,
                    24.33
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    109.511909,
                    18.252847
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    105.39,
                    28.91
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    120.5836,
                    31.2973
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    120.58395,
                    31.29755
                ]
            },
            {
                "id": "987612878788",
                "org": "中国电信",
                "longlat": [
                    120.58328,
                    31.2980
                ]
            },
            {
                "id": "952612878788",
                "org": "中国电信",
                "longlat": [
                    120.58228,
                    31.2980
                ]
            },
            {
                "id": "952712878788",
                "org": "中国电信",
                "longlat": [
                    120.58228,
                    31.2970
                ]
            },
            {
                "id": "952756878788",
                "org": "中国电信",
                "longlat": [
                    120.58238,
                    31.2970
                ]
            },
            {
                "id": "952756878788",
                "org": "中国电信",
                "longlat": [
                    120.58238,
                    31.2960
                ]
            },
            {
                "id": "952756878788",
                "org": "中国电信",
                "longlat": [
                    120.58248,
                    31.2965
                ]
            }
        ];
        drawChart_map_cu("Chart_map", dataMap_cu);
    });

    /**
     * 绘制环形图
     * @param dom 绘制的dom对象
     * @param name string 数值名称
     * @param str string 小标题
     * @param data json数组 数据 [{value:number,name:string},...]
     */
    function drawChart_pie(dom, name, str, data) {
        var legenData = [], legendSelected = {};
        $.each(data, function (index, item) {
            legenData.push(item.name);
            legendSelected[item.name] = (item.value != 0);
        });
        var total = 0;
        $.each(data, function (index, item) {
            total += item.value;
        });
        var myChart = echarts.init(dom);
        $(dom).resize(function () { //容器大小变化时，表重新自适应 ，$("selector").resize()依赖jquery和jqResize.js
            myChart.resize();
        });

        function getTextTotal(num) {
            return '总计(' + num + ')';
        }

        var option = {
            title: {
                text: getTextTotal(total),
                subtext: str,
                x: 'center',
                y: '48%'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'horizontal',
                left: 'left',
                top: 'top',
                data: legenData,
                selected: legendSelected
            },
            series: [
                {
                    name: name,
                    type: 'pie',
                    radius: ['45%', '62%'],
                    center: ['50%', '55%'],
                    label: {
                        normal: {
                            show: true,
                            formatter: '{b}({c})'
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0,0,0,0.5)'
                        }
                    },
                    // color: ['#37A2DA', '#2FBBDD', '#67DFE2', '#96D9AE', '#71F6F9', '#EB9275', '#F16D8D', '#E062AE', '#E690D1', '#E7BCF3', '#9D96F5', '#8378EA', '#96BFFF'],
                    data: data
                }
            ]
        };
        myChart.setOption(option, true);
        myChart.on("legendselectchanged", function (obj) { //切换图例开关时，计算显示的图例的总数
            var selectedTotal = 0;
            legendSelected = obj.selected;
            $.each(data, function (index, item) {
                if (legendSelected[item.name]) {
                    selectedTotal += item.value;
                }
            });
            option.title.text = getTextTotal(selectedTotal);
            option.legend.selected = legendSelected;
            myChart.setOption(option);
        });
    }

    /**
     * 绘柱状图
     * @param dom 绘制的dom对象
     * @param name string 数值名称
     * @param str string 小标题
     * @param data json数组 数据 [{value:number,name:string},...]
     */
    function drawChart_bar(dom, name, str, data) {
        var dataName = [], dataValue = [];
        $.each(data, function (index, item) {
            dataName.push(item.name);
        });
        $.each(data, function (index, item) {
            dataValue.push(item.value);
        });
        var total = 0;
        $.each(data, function (index, item) {
            total += item.value;
        });
        var myChart = echarts.init(dom);
        $(dom).resize(function () { //容器大小变化时，表重新自适应 ，$("selector").resize()依赖jquery和jqResize.js
            myChart.resize();
        });
        var option = {
            title: {
                // text: '年度告警分析',
                subtext: str + '（总计 ' + total + '）'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#283b56'
                    }
                }
            },
            grid: {
                left: 0,
                right: 0,
                // top: '20px',
                bottom: '10px',
                containLabel: true
            },
            xAxis: {
                data: dataName,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            // dataZoom: [ //缩放
            //     {
            //         type: 'inside'
            //     }
            // ],
            series: [
                {
                    type: 'bar',
                    // barWidth : 30,//柱图宽度
                    barMaxWidth: 50,//最大宽度
                    name: name,
                    label: {
                        normal: {
                            show: true,
                            align: 'center',
                            position: 'top',
                            color: '#888'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#83bff6'},
                                    {offset: 0.5, color: '#188df0'},
                                    {offset: 1, color: '#188df0'}
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#2378f7'},
                                    {offset: 0.7, color: '#2378f7'},
                                    {offset: 1, color: '#83bff6'}
                                ]
                            )
                        }
                    },
                    data: dataValue
                }
            ]
        };

        // var zoomSize = 6;
        // myChart.on('click', function (params) {  //点击缩放
        //     myChart.dispatchAction({
        //         type: 'dataZoom',
        //         startValue: dataName[Math.max(params.dataIndex - zoomSize / 2, 0)],
        //         endValue: dataName[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        //     });
        // });

        myChart.setOption(option, true);
    }

    //绘制年度分析柱状图
    function drawChart_bar_year(data) {
        drawChart_bar(document.getElementById("Chart_bar"), '告警统计', '年度告警分析', data);
    }

    //绘制地图+点聚合
    function drawChart_map_cu(domId, data) {
        var map,
            cluster, markers = [],
            $backBtn = $(".map_back"),
            zoomMin = 3,
            zoomMax = 20,
            zoomNumber = 4,
            centerPoint = [105, 34];
        map = new AMap.Map(domId, { //初始化地图
            resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
            rotateEnable: true, //是否允许设置地图顺时针旋转角度
            pitchEnable: true, //是否允许设置俯仰角度，3D视图下为true，2D视图下无效。（自V1.4.0开始支持）
            viewMode: '3D', //开启3D视图,默认为关闭
            buildingAnimation: true, //楼块出现是否带动画
            expandZoomRange: true, //是否支持可以扩展最大缩放级别,和zooms属性配合使用，设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20
            zooms: [zoomMin, zoomMax], //地图显示的缩放级别范围，在PC上，默认为[3,18]，取值范围[3-18]；在移动设备上，默认为[3,19],取值范围[3-19]
            zoom: zoomNumber, //地图显示的缩放级别，若center与level未赋值，地图初始化默认显示用户所在城市范围，3D地图下，zoom值，可以设置为浮点数。
            center: centerPoint //地图中心点
        });

        $.each(data, function (index, item) {
            markers.push(new AMap.Marker({
                animation: "AMAP_ANIMATION_DROP",
                // icon:'http://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png', //蓝色图标 默认
                // icon:'http://webapi.amap.com/theme/v1.3/markers/n/mark_rs.png', //红色图标
                position: item.longlat,
                extData: {
                    id: item.id,
                    org: item.org
                },
                map: map
            }));
        });

        var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)}); //信息窗口对象
        $.each(markers, function (index, item) { //标记点的点击事件
            item.on('click', function (o) {
                var thisMarker = o.target;
                var geoLonLat = thisMarker.getPosition();
                var mapGetZoom = map.getZoom();
                var tarZoom = 17;
                if (mapGetZoom < tarZoom) {
                    map.setZoomAndCenter(tarZoom, geoLonLat);
                }
                var extData = thisMarker.getExtData();
                var infoHtml = '<div style="padding: 5px 5px 5px 0;font-size: 12px;">设备串号：' + extData.id + '</div>'
                    + '<div style="padding: 0 5px 0 0;font-size: 12px;">所属机构：' + extData.org + '</div>'
                    + '<a href="javascript:void(0);" style="padding: 5px 5px 5px 0;font-size: 12px;color: #0c60ee;cursor: pointer;">查看详情》》</a>';
                infoWindow.setContent(infoHtml);
                infoWindow.open(map, geoLonLat);
            });
        });

        $backBtn.on('click', function () {
            map.setZoomAndCenter(zoomNumber, centerPoint);
        });

        if (cluster) { //如果存在，则先清空
            cluster.setMap(null);
        }
        cluster = new AMap.MarkerClusterer(map, markers); //点聚合
        cluster.on('click', function () {
        });

        map.on('zoomchange', function () { //监听缩放事件，根据当前缩放等级，是否显示返回按钮
            var curZoom = map.getZoom();
            if (curZoom != zoomNumber) {
                $backBtn.show();
            } else {
                $backBtn.hide();
            }
        });

    }

</script>
</body>
</html>